<style scoped>

</style>

<template>
  <div v-loading="loading">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-row type="flex" align="middle" gutter="10">
        <el-col :span="4">
          <el-autocomplete class="inline-input" v-model="username" placeholder="请输入用户名" ></el-autocomplete>
        </el-col>
        <el-col :span="1">
          <el-button size="small" type="primary" icon="el-icon-search" @click="selectByUsername" >查询</el-button>
        </el-col>
        <el-col :span="3" :offset="16">
          <el-button size="small" type="primary" @click="addUserName = ``;addUserVisible = true">添加角色</el-button>
        </el-col>
      </el-row>
<!--      添加角色-->
      <template>
        <el-dialog title="添加用户" :visible.sync="addUserVisible" width="30%" top="30vh">
          <el-form>
            <el-form-item label="用户名称" :label-width="`90px`">
              <el-col :span="30">
                <el-input v-model="addUserName" autocomplete="off"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addUserVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">添 加</el-button>
          </div>
        </el-dialog>
      </template>
<!--      <el-form-item label="搜索：">-->
<!--        <el-input size="small" v-model="username" placeholder="请输入用户名"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button size="small" type="primary" icon="el-icon-search" @click="selectByUsername">搜索</el-button>-->
<!--&lt;!&ndash;        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>&ndash;&gt;-->
<!--      </el-form-item>-->
    </el-form>
    <!-- table start  -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="username" label="账号" ></el-table-column>
      <el-table-column prop="nickname" label="姓名" ></el-table-column>
      <el-table-column prop="userEmail" label="邮箱"></el-table-column>
      <el-table-column prop="userMobile" label="手机号码" ></el-table-column>
      <el-table-column prop="userRegtime" label="注册时间"></el-table-column>
      <el-table-column prop="userModtime" label="修改时间"></el-table-column>
      <el-table-column label="操作" width="350" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="remove(scope.$index+1)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
import * as account from '../api/account';
import * as util from '../assets/util.js';
import Pagination from '../components/Pagination'
let myMixin = {
  data: function() {
    return { account }
  }
}
export default {
  mixins: [myMixin],
  data() {
    return {
      username: "",
      canReset: false,
      list: [],
      loading: false,
      pageparm: {
        currentPage: 1,
          pageSize: 10,
          total: 10
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: util.session("token")
      },
      addUserVisible: false,
      addUserName: ""
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  methods: {
    fetchData() {
      let vm = this;
      vm.loading = true;
      account.request.r().then((res) => {
        vm.list = res.data.datas;
        vm.loading = false;
      }).catch(() => {
        vm.loading = false
      });
    },remove(m) {
      let vm = this;
      let userId = vm.list[m-1].userId;
      vm.loading = true;
      account.remove.r(userId).then((res) => {
        vm.list = res.data.datas;
        vm.loading = false;
      }).catch(() => {
        vm.loading = false
      });
    },callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.list
    },selectByUsername() {
      let vm = this;
      vm.loading = true;
      account.request.requestByUsername(vm.username).then((res) => {
        vm.list = res.data.datas;
        vm.loading = false;
      }).catch(() => {
        vm.loading = false
      });
    },
    addUser() {
      let vm = this;
      vm.addUserVisible = false;
      let user = {
        "username": vm.addUserName
      }
      account.add.addUser(user).then((res) => {

      })

    }

  },created() {
    this.fetchData();
  }

}
</script>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>